<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('plugins.title')}} </h2>
        </template>
        <template v-slot:header-right>
            <component v-if="value.component" v-bind:is="value.component" :key="id" v-for="(value, id) in components" @update-row="updateRow($event)"></component>
        </template>
    </cly-header>
    <cly-main>
		<cly-section>
			<cly-datatable-n :rows="pluginsData" :tracked-fields="localTableTrackedFields" :default-sort="{prop: 'name', order: 'ascending'}" :row-class-name="tableRowClassName">
                <template v-slot="scope">
                    <el-table-column type="switch" fixed="left" width="70" prop="enabled">
                        <template v-slot="rowScope">
                            <el-switch :value="rowScope.row.enabled"
                                @input="onToggle(scope, rowScope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column sortable prop="name" :label="i18n('plugins.name')" width="200">
                        <template slot-scope="rowScope">
                            <a :href="rowScope.row.homepage" target="_blank">{{ rowScope.row.name }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="desc" column-key="description" :label="i18n('plugins.description')">
                        <template v-slot="rowScope">
                            <div style="white-space: normal;" v-html="rowScope.row.description"> 
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deps" :label="i18n('plugins.dependents')" width="200"></el-table-column>
                    <!-- <el-table-column prop="version" :label="i18n('plugins.version')" width="100"></el-table-column> -->
                </template>
                <template v-slot:header-left>
                    <el-radio-group v-model="filterValue" @change="filter" plain size="small">
                        <el-radio-button label="all">{{i18n('plugins.all')}}</el-radio-button>
                        <el-radio-button label="enabled">{{i18n('plugins.enabled')}}</el-radio-button>
                        <el-radio-button label="disabled">{{i18n('plugins.disabled')}}</el-radio-button>
                    </el-radio-group>
                </template>
                <template v-slot:bottomline="scope">
                    <cly-diff-helper v-if="!loading" :diff="scope.diff" @discard="scope.unpatch()" @save="updateStatus(scope)">
                    </cly-diff-helper>
                </template>
            </cly-datatable-n>
		</cly-section>
        <cly-confirm-dialog @cancel="closeConfirmDialog" @confirm="submitConfirmDialog" :before-close="closeConfirmDialog" ref="deleteConfirmDialog" :visible.sync="dialog.showDialog" dialogType="danger" :saveButtonLabel="dialog.saveButtonLabel" :cancelButtonLabel="dialog.cancelButtonLabel" :title="dialog.title" >
            <template slot-scope="scope">
                <div v-html="dialog.text"></div>
            </template>
        </cly-confirm-dialog>
    </cly-main>
</div>